<template>
  <el-container class="container">
    <el-header class="header">
      <div class="header-content">
        <span class="logo">程序员接单平台</span>
        <el-menu mode="horizontal" :default-active="activeIndex" class="menu">
          <el-menu-item index="1">首页</el-menu-item>
          <el-menu-item index="2">任务</el-menu-item>
          <el-menu-item index="3">我的</el-menu-item>
        </el-menu>
      </div>
    </el-header>

    <el-main class="main">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="i in 4" :key="i">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>{{ ['热门任务', '最新任务', '推荐程序员', '技术文章'][i - 1] }}</span>
                <el-button class="button" text>查看更多</el-button>
              </div>
            </template>
            <div v-for="o in 4" :key="o" class="text item">
              {{ '列表内容 ' + o }}
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>

    <el-footer class="footer">
      <div class="footer-content">
        <span>© 2024 程序员接单平台</span>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const activeIndex = ref('1');

    onUnmounted(() => {
    });

    onMounted(()=>{
        const tables = document.querySelectorAll('.el-table');
        tables.forEach(table => {
            if (!table.style.height) { 
                table.style.height = 'auto';
            }
        });
    })

    return {
      activeIndex,
    };
  },
};
</script>

<style scoped>
/* 全局样式 */
body {
  font-family: sans-serif;
  margin: 0;
}

/* 容器样式 */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f0f2f5;
}

/* 头部样式 */
.header {
  height: 60px; /* 降低头部高度 */
  padding: 0 20px;
  background-color: #fff; /* 纯白色背景 */
  border-bottom: 1px solid #eee; /* 底部边框 */
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.logo {
  font-size: 20px; /* 稍微缩小 logo 字体 */
  font-weight: bold;
}

/* 菜单样式 */
.menu {
  border: none;
  background: transparent;
}

.menu .el-menu-item {
  border-radius: 4px; /* 更小的圆角 */
  padding: 0 15px; /* 更小的内边距 */
  margin: 0 3px; /* 更小的外边距 */
  font-size: 14px; /* 更小的字体 */
  color: #333; /* 更深的文字颜色 */
}

.menu .el-menu-item:hover {
  color: #409eff; /* hover 时改变文字颜色 */
  background-color: transparent; /* hover 时不改变背景色 */
}

.menu .el-menu-item.is-active {
  color: #409eff;
  border-bottom: 2px solid #409eff; /* 激活时添加底部边框 */
}

/* 主要内容样式 */
.main {
  flex: 1;
  padding: 20px;
}

.el-card {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 稍微减弱阴影 */
  overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

/* 底部样式 */
.footer {
  text-align: center;
  padding: 10px 0; /* 减少 padding */
  background-color: #f9f9f9; /* 稍微调整背景色 */
  border-top: 1px solid #eee;
}

.footer-content {
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #999;
}
</style>